<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="feedback-home">
        <div class="feedback-font1">请选择你想反馈的问题点</div>
        <div style="padding-top: 10px;margin-bottom: 15px;">
          <van-checkbox-group v-model="userSel" class="antbox">
            <van-checkbox name="功能异常：功能故障或不可用">功能异常：功能故障或不可用</van-checkbox>
            <van-checkbox name="产品建议：用的不爽，我有建议">产品建议：用的不爽，我有建议</van-checkbox>
            <van-checkbox name="安全问题：密码、隐私、欺诈等">安全问题：密码、隐私、欺诈等</van-checkbox>
            <van-checkbox name="支付问题：无法支付、支付慢等">支付问题：无法支付、支付慢等</van-checkbox>
            <van-checkbox name="其他问题">其他问题</van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="feedback-font1">请补充详细问题和意见</div>
        <div class="vanfield">
          <van-field
            v-model="message"
            rows="3"
            autosize
            label=""
            type="textarea"
            maxlength="240"
            placeholder="请输入不少于10个字的描述"
            show-word-limit
          />
        </div>
        <div style="display: flex;justify-content: space-between;margin-top: 40px;">
          <div class="feedback-font1">请提供相关问题的截图或照片</div>
          <div style="font-family: axis;">
            <span style="color: rgba(110, 89, 255, .6);">{{fileList.length}}</span>
            <span>/4</span>
          </div>
        </div>
        <div class="vanuploader" style="margin-top: 18px;">
          <van-uploader v-model="fileList" multiple :after-read="onOversize" @oversize="onOversizeTitle" :max-size="10 * 1024 * 1024" :max-count="4" />
        </div>
      </div>
      <van-overlay :show="showLoading">
        <van-loading style="position: absolute;top: calc(50vh - 20px);left: calc(50% - 20px);" type="spinner" color="#6E59FF" />
      </van-overlay>
      <div class="feedback-btn" @click="jumpTake">
        <span>提交</span>
      </div>
    </div>

  </template>

  <script>
  import { Toast,Loading,Overlay } from 'vant'
  import native from './public/native.vue'
  import { Checkbox, CheckboxGroup,Uploader } from 'vant';
  export default {
    name: 'userFeedback',
    data () {
      return {
        title:'用户反馈',
        userSel:[],
        userStr:'',
        message:'',
        fileList:[],
        imgStr:'',
        showLoading:false
      }
    },  
    components:{
      native,
      [Checkbox.name]:Checkbox,
      [CheckboxGroup.name]:CheckboxGroup,
      [Uploader.name]:Uploader,
      [Loading.name]:Loading,
      [Overlay.name]:Overlay,
    },
    computed: {
      
    },
    mounted() {
        
    },
    methods: {
      //上传头像
      onOversize(file) {
        this.showLoading = true;
        let params = new FormData();
        params.append('file',file.file);
        let config = { headers: { //添加请求头
              'Content-Type': 'multipart/form-data' } }
        this.$http.post(this.utils.config+"/gz/pub/uploadImg",params,config).then((data) => {
          if(data.data.success){
            if(this.imgStr){
              this.imgStr+=','+data.data.data;
            }else{
              this.imgStr=data.data.data;
            }
            this.showLoading = false;
          }
        })
      },
      onOversizeTitle(file) {
        Toast('文件大小不能超过10M！');
      },
      jumpTake(){
        console.log(this.imgStr)
        for(var i=0;i<this.userSel.length;i++){
          if(i == 0){
            this.userStr = this.userSel[0];
          }else{
            this.userStr += ',' + this.userSel;
          }
        }
        if(!this.userSel){
          Toast('请选择问题点！');
          return
        }
        if(!this.message){
          Toast('请补充详细问题和意见！');
          return
        }
        if(!this.imgStr){
          Toast('请提供相关问题的截图或照片！');
          return
        }
        var list = {
          question:this.userStr,
          detailQuestion:this.message,
          images:this.imgStr
        };
        this.$http.post(this.utils.config+"/gz/data/feedback",list).then((data) => {
          Toast(data.data.msg)
          if(data.data.success){
            this.userSel=[];
            this.fileList=[];
            this.message='';
          }
        })
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .feedback-font1{
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
      padding: 6px 0px;
    }
    .feedback-home{
      padding:15px;
    }
    .antbox /deep/ .van-checkbox__icon--checked .van-icon{
      background-color: #6E59FF;
      border: 1px solid #6E59FF;
    }
    .antbox /deep/ .van-checkbox{
      padding: 10px 0px;
    }
    .antbox /deep/ .van-checkbox__label{
      color: #fff;
      font-size: 14px;
    }
    .vanfield /deep/ .van-cell{
      margin-top: 20px;
      background-color: #1E1F24;
      border-radius: 8px;
    }
    .vanfield /deep/ .van-field__control{
      font-size: 14px;
      color: rgba(255, 255, 255, .4);
    }
    .vanfield /deep/ textarea::placeholder{
      font-size: 14px;
      color: rgba(255, 255, 255, .4);
    }
    .vanuploader /deep/ .van-uploader__upload{
      background-color: #1E1F24;
      border-radius: 8px;
    }
    .feedback-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
    }
  </style>
